<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title>FrozenUI</title>
		<link rel="stylesheet" href="css/frozen.css">
		<script src="lib/zepto.min.js"></script>
		<script src="js/frozen.js"></script>
	</head>

	<body ontouchstart="">
		<header class="ui-header ui-header-stable ui-border-b">
			<i class="ui-icon-return" onclick="history.back()"></i>
			<h1>这是头</h1>
			<button class="ui-btn">回首页</button>
		</header>
		<footer class="ui-footer ui-footer-btn">
			<ul class="ui-tiled ui-border-t">
				<li data-href="index.html" class="ui-border-r">
					<div>基础样式</div>
				</li>
				<li data-href="ui.html" class="ui-border-r">
					<div>UI组件</div>
				</li>
				<li data-href="js.html">
					<div>JS插件</div>
				</li>
			</ul>
		</footer>
		<section class="ui-container">
			<section id="tab">
				<div>
					<p>标签栏</p>
					<div>
						<div class="ui-tab">
							<ul class="ui-tab-nav ui-border-b">
								<li class="current">第一个</li>
								<li>全部<a href="#" class="ui-icon-close"></a></li>
							</ul>
							<ul class="ui-tab-content" style="width:300%">
								<li class="current">内容1dg</li>
								<li>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
									<p>klsdajflsadjlsj</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</section>
		</section>
	</body>

	<script>
		(function() {
			var tab = new fz.Scroll('.ui-tab', {
				role: 'tab',
				autoplay: false
			});
			/* 滑动开始前 */
			tab.on('beforeScrollStart', function(fromIndex, toIndex) {
				console.log(fromIndex, toIndex); // from 为当前页，to 为下一页
			});
			/* 滑动结束 */
			tab.on('scrollEnd', function(curPage) {
				console.log(curPage);
			});
		})();
	</script>

</html>